<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: black;
            opacity: 1;
        }
        #btn{
            margin-top: 60px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <button id="btn">点击</button>
    <script src="./js/utils.js"></script>
    <script>
        function move(dom, obj, cb) {
            // 判断定时器是否全部结束
            let timerLen = 0;
           
            // 遍历传入的对象
            for (let key in obj) {
                
                timerLen++
                let step
                clearInterval(dom[key])
                dom[key] = setInterval(function () {
                    // 获取css样式
                    let style = parseInt(getStyle(dom, key))
                    // 判断数值值是否为opacity
                    if (key == "opacity") {
                        console.log(obj[key])
                        step = Math.abs((style - obj[key]) / 5)
                        style -= step
                        if (style <= obj[key]) {
                            style = obj[key]
                            clearInterval(dom[key])
                            timerLen--
                            if (timerLen == 0) {
                                cb && cb()
                            }
                        }
                        dom.style[key] = style
                    }
                    else {
                        step = Math.ceil((obj[key] - style) / 5)
                        style += step
                        if (style == obj[key]) {
                            clearInterval(dom[key])
                            timerLen--
                            if (timerLen == 0) {
                                cb && cb()
                            }
                        }
                        dom.style[key] = style + "px"
                    }
                }, 500)
            }
        }


        btn.onclick=function(){
            move(box, { left: 1000, width: 500, height: 300 }, function () {
            box.style.background = 'blue'
        })
        // move(box, { opacity: 0.5 })
        }
       

    </script>
</body>

</html>